<template>
  <div class="home-search">
    <nav-login></nav-login>
    <div class="w1200">
      <el-row>
        <el-col :span="7">
          <div class="seachLeft" @click="jumpHome">
            <img src="@/assets/logo/logo1.jpg">
          </div>
        </el-col>
        <el-col :span="10">
          <div class="seach-box">
            <input
              v-model.trim="input"
              :class="{'input-border':myfocus}"
              @focus="myfocus = true"
              @blur="myfocus = false "
              placeholder="产品型号/产品名称（用空格分开文字，如导向轴 标准）"
              @keyup.enter="clickSeach"
            >
            <el-button type="primary" icon="el-icon-search" @click="clickSeach">搜 索</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- <dl>
        <dt>小三角</dt>
        <dd
          v-for="(item, index) in goodsList"
          :key="index"
          :class="{active:item.active}"
          @mouseenter="enter(index)"
          @mouseleave="leave(index)"
        >{{ item.name }}</dd>
      </dl>-->
      <!-- <el-row class="screen">
        <el-button type="primary" size="mini">
          综合
          <i class="el-icon-sort"></i>
        </el-button>
        <el-button type="primary" size="mini">
          人气
          <i class="el-icon-sort"></i>
        </el-button>
        <el-button type="primary" size="mini">
          新品
          <i class="el-icon-sort"></i>
        </el-button>
        <el-button type="primary" size="mini">
          销量
          <i class="el-icon-sort"></i>
        </el-button>
        <el-button type="primary" size="mini">
          价格
          <i class="el-icon-d-caret"></i>
        </el-button>
      </el-row>-->
      <div v-loading="loading">
        <ol v-if="goodsList.length">

          <!-- <li
            v-for="item in goodsList"
            :key="item.id"
            @click="jumpDetails(item.id, item.goods_id,item)"
          > -->
          <li
            v-for="item in goodsList"
            :key="item.id"
          >
            <router-link
              target="_blank"
              :key="item.id"
              class="goods"
              :to="{
                name:'productDetails',
                params:{
                  id:item.id,
                  pid:item.goods_id,
                  item:item
                }, 
                query:{
                  id:item.id,
                  pid:item.goods_id,
                  item:item
                }
              }"
            >
              <img v-lazyload="item.goods_logo" src="@/assets/logo/loading.png">
              <!-- <img :src="item.goods_logo"> -->
              <el-tooltip class="item" effect="dark" :content="item.goods_title" placement="top-start">
                <p>{{ item.goods_title }}</p>
              </el-tooltip>
              <!-- <p>{{ item.goods_title }}</p> -->
              <div>
                <span>￥{{ item.selling_price }}</span>
                <del>￥{{ item.market_price }}</del>
              </div>
              <bdi>{{item.norm_name}}</bdi>
            </router-link>
          </li>
        </ol>
        <no-data v-else msg="暂无相关商品..."/>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </div>
    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>

<script>
export default {
  name: 'homeSeach',
  data() {
    return {
      myfocus: false,
      loading: false,
      input: '',  // 搜索的关键字
      goodsList: [],
      total: 0,
      pageSize: 10,  // 每一页个数
      currentPage: 1,
    }
  },
  methods: {
    // 分页  缺少总页数 ----
    async currentChange(current) {
      this.pageInit(current)
    },

    // 跳转到商品详情页面
    jumpDetails(id, pid, item) {
      console.log(id, pid)
      this.$router.push({
        name: 'productDetails',
        params: {
          id,
          pid,
          item
        }
      })
    },

    //  当前页面的搜索
    async clickSeach() {
      this.pageInit()
    },

    // 获取数据
    async pageInit(page = 1) {
      // this.loading = true
      let search = this.input
      const res = await this.$http({
        method: 'post',
        url: '/api/home/search_goods/index',
        data: {
          search,
          page
        }
      })
      let myList = []
      if (res.data.State.Code == 200) {
        this.loading = false
        this.goodsList = res.data.data
        this.total = res.data.total   // 总页数
        this.pageSize = res.data.per_page   // 每页显示数目
        this.currentPage =res.data.current_page
      }
    },
    // 跳转到首页
    jumpHome() {
      this.$router.push("/")
    },


    // 以下的区域的方法 在这个页面没有用 是自己在练习的时候写的 
    enter(index) {
      this.$set(this.goodsList[index], 'active', true)
      console.log(this.goodsList[index])
    },

    leave(index) {
      this.$set(this.goodsList[index], 'active', false)
    }
    // 以上的区域的方法 在这个页面没有用 是自己在练习的时候写的 

  },
  mounted() {
    this.input = this.$route.params.text || ''
    this.pageInit()
  }
}
</script>

<style lang='scss' scoped>
dl {
  display: flex;
  background-color: #000;
  color: #fff;

  dd {
    padding: 10px 20px;
    background-color: rgb(14, 116, 19);
    margin-left: 10px;
    position: relative;
    cursor: pointer;
  }

  .active {
    &::after {
      content: "";
      width: 0;
      height: 0;
      border: 6px #fff solid;
      border-top-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
      position: absolute;
      bottom: 0px;
      left: calc(50% - 6px);
    }
  }
}
.w1200 {
  width: 1200px;
  margin: auto;
  .seachLeft {
    img {
      cursor: pointer;
    }
  }
  /deep/ .seach-box {
    height: 108px;
    display: flex;
    flex-direction: row;
    align-items: center;
    input {
      flex: 1;
      height: 36px;
      padding-left: 10px;
      color: #333;
    }
    .input-border {
      border: 2px solid #409eff;
    }
    .el-input__inner {
      border-radius: 0px;
    }
    .el-button {
      border-radius: 0px;
    }
  }
  ol {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 314px;
    li {
      box-sizing: border-box;
      width: 180px;
      margin: 20px 30px;
      text-align: center;
      font-size: 16px;
      border: 1px solid rgba(240, 240, 240, 0.61);
      transition: all 0.4s ease-in-out;
      padding-bottom: 10px; 
      cursor: pointer;
      &:hover {
        box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.15);
      }
      img {
        width: 140px;
        height: 140px;
        margin: 20px 20px;
      }
      p {
        padding: 0 10px;
        font-size: 14px;
        color: #333;
        line-height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        min-height: 30px;
      }
      div {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        font-size: 16px;
        span {
          color: #f40;
        }
        del {
          color: #ccc;
        }
      }
      bdi{
        color: rgb(17, 17, 17);
        font-size: 12px;
        border: #ddd 1px solid;
        padding: 2px 14px;
      }
    }
  }
  /deep/ .screen {
    margin-top: 20px;
    margin-left: 30px;
    .el-button {
      border-radius: 0px;
    }
  }

  .nogoods {
    margin-top: 30px;
    width: 100%;
    height: 314px;
    text-align: center;
    line-height: 314px;
    font-size: 60px;
    color: antiquewhite;
    letter-spacing: 5px;
    border: 3px solid antiquewhite;
  }
  .el-pagination {
    text-align: center;
  }
}
</style>